<template>
  <div class="box">
    <van-nav-bar
      title="购物车"
      left-arrow
      fixed
      style="height: 8vh; background: aliceblue; color: black"
    >
      <template #right>
        <van-icon name="delete-o" size="20" />
      </template>
    </van-nav-bar>
    <div style="width: 100%; height: 100%; margin-top: 9vh">
      <div class="gwc-1">
        <div class="gwc-2">
          <van-checkbox v-model="checked" icon-size="25px"></van-checkbox>
        </div>
        <div class="gwc-3">
          <img src="../assets/img/yx/元祖5.jpg" alt="" />
        </div>
        <div class="gwc-4">
          <div class="gwc-4-1">
            <span class="gwc-4-1-2">元祖月饼</span>
            <div style="margin-top: 10px">
              <span class="gwc-4-1-3"
                >元祖月饼礼盒 冰淇淋月饼中秋节礼品3味12饼 雪月饼840g</span
              >
            </div>
          </div>
          <div class="gwc-4-2">
            <div class="gwc-left">
              <span>￥16.00</span>
            </div>
            <div class="gwc-right">
              <van-stepper
                v-model="value"
                theme="round"
                button-size="22"
                disable-input
              />
            </div>
          </div>
        </div>
      </div>
      <h2>为您推荐</h2>
    </div>
    <div class="shopy">
      <div class="shop">
      <div class="shop-1">
        <img src='../assets/img/ct/七星广式月饼2.jpg' alt="" />
        <div class="shop-2">
          <span>
            香港美心流心奶黄月饼礼盒中秋节送礼特产广式港式蛋黄流沙糕点
          </span>
        </div>
        <div class="shop-3">
          <span>￥16.00</span>
        </div>
      </div>
      <div class="shop-1">
        <img src='../assets/img/zx/优享时3.jpg' alt="" />
        <div class="shop-2">
          <span>
            金九伍仁金腿月饼中秋五仁大月饼2斤礼盒中秋送礼
          </span>
        </div>
        <div class="shop-3">
          <span>￥16.00</span>
        </div>
      </div>
      <div class="shop-1">
        <img src='../assets/img/gt/五芳3.jpg' alt="" />
        <div class="shop-2">
          <span>
            中秋节月饼礼盒装高档木盒logo定制广式流心奶黄2022新款礼品送礼
          </span>
        </div>
        <div class="shop-3">
          <span>￥16.00</span>
        </div>
      </div>
      <div class="shop-1">
        <img src='../assets/img/lx/奶黄流心月饼3.jpg' alt="" />
        <div class="shop-2">
          <span>
            沈大成月饼礼盒广式苏式奶黄流心中秋节高端送礼礼品糕点员工团购
          </span>
        </div>
        <div class="shop-3">
          <span>￥16.00</span>
        </div>
      </div>
      <div class="shop-1">
        <img src='../assets/img/ct/豆沙蛋黄莲蓉12.jpg' alt="" />
        <div class="shop-2">
          <span>
            中国香港元朗荣华【致味流心奶黄月饼】中秋广式月饼礼盒旗舰店款
          </span>
        </div>
        <div class="shop-3">
          <span>￥16.00</span>
        </div>
      </div>
      <div class="shop-1">
        <img src='../assets/img/gt/故宫2.jpg' alt="" />
        <div class="shop-2">
          <span>
            梅元居礼盒包邮广式五仁手工老式馅料传统中秋节伍仁金腿大月饼
          </span>
        </div>
        <div class="shop-3">
          <span>￥16.00</span>
        </div>
      </div>
    </div>
    </div>
    <van-submit-bar
      style="background: #f8f8f8"
      :price="3050"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked">全选</van-checkbox>
    </van-submit-bar>
    <my-flooer></my-flooer>
  </div>
</template>
<script>
import { Toast } from "vant";
import MyFlooer from "@/components/MyFlooer.vue";
export default {
  components: { MyFlooer },
  methods: {
    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("删除");
    },
  },
  data() {
    return {
      checked: false,
    };
  },
};
</script>
<style>
body {
  background: #eeeaea;
}
.van-icon-arrow-left:before {
  font-size: 36px;
}
.van-icon-delete-o:before {
  font-size: 36px;
}
.van-nav-bar__title {
  color: black;
}
.gwc-1 {
  margin: 2vw;
  border-radius: 2vw;
  height: 16vh;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.gwc-2 {
  width: 15.2vw;
  height: 16vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gwc-3 {
  width: 22.5vw;
  height: 16vh;
  display: flex;
  align-items: center;
}
.gwc-3 img {
  width: 100px;
  height: 100px;
  border-radius: 20px;
}
.gwc-4 {
  padding-top: 5vw;
  width: 50vw;
  height: 16vh;
  padding-left: 25px;
}
.gwc-4-1 .gwc-4-1-2 {
  padding-top: 1vw;
  font-size: 4vw;
  font-weight: bold;
}
.gwc-4-1 .gwc-4-1-3 {
  font-size: 4vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.gwc-4-2 {
  display: flex;
  margin-top: 5vw;
}
.gwc-left {
  color: red;
  font-size: 15px;
}
.gwc-right {
  margin-left: 13vw;
}
h2 {
  text-align: center;
  font-size: 20px;
  margin: 25px auto;
}
.shopy{
  display: flex;
  align-content: center;
  box-sizing:border-box ;
  padding-bottom: 110px;
}
.shop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  width: 100%;
}
.shop-1 {
  margin: 3vw;
  background: #fff;
  width: 165px;
}
.shop-1 img {
  border-radius: 3vw;
  width: 100%;
}
.shop-2 span {
  font-size: 15px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-3 {
  font-size: 15px;
  color: red;
  margin: 8px auto;
}
.van-submit-bar {
  bottom: 50px;
  padding: 6px 0;
}
</style>